<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="rmCity">
        <template v-for="(item, key, ind) in cityData.hotCities" :key="ind">
          <van-cell :title="item.cityName" @click="changeCity(item)" />
        </template>
      </div>

      <template v-for="(group, key, index) in cityData.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, ke, i) in group.cities" :key="i">
          <van-cell :title="city.cityName" @click="changeCity(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";
import { useRouter } from "vue-router";
import useCityStore from "../../../stores/modules/city";
const router = useRouter();
//定义props
const props = defineProps({
  cityData: {
    type: Object,
    default: () => ({}),
  },
});
//定义右侧列表
const indexList = computed(() => {
  const list = props.cityData.cities.map((item) => item.group);
  list.unshift("#");
  return list;
});

//选择城市
const changeCity = (city) => {
  //保存城市
  const cityStore = useCityStore();
  cityStore.curretnCity = city;
  console.log(city);
  //推出上一级页面
  router.back();
};
</script>

<style lang="less" scoped>
.rmCity {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px 20px;
  .van-cell {
    padding: 0;
    width: 70px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background-color: #fff3ec;
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>
